<template>
  <div class="view_window">
    <el-container>
      <el-main class="main_view">
        <div
          class="boom_box"
          v-for="item in roomList"
          :key="item.roomid"
          @click="toplay(item)"
        >
          <div class="left">
            <img src="images/room.png" alt="" />
          </div>
          <div class="right">
            <br />
            <br />
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游戏房间&nbsp;{{
                item.roomid > 31 ? item.roomid - 30 : item.roomid - 1
              }}</span
            >
            <br />
            <br />
            <br />
            <span>&nbsp;&nbsp;房间人数:0/{{ item.num }}</span>
          </div>
          <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>
      </el-main>
      <el-aside class="side_view" width="450px">
        <div class="div_top">
          <!-- 玩家列表 -->
          <el-table :data="userdata" height="300">
            <el-table-column
              align="center"
              prop="username"
              label="玩家名"
              width="80%"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="rankid"
              label="段位"
              width="80%"
            >
            </el-table-column>
            <!-- 右侧操作栏 -->
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="220px"
            >
              <el-button size="mini" @click="add()">添加</el-button>
              <el-button size="mini">详情</el-button>
              <el-button size="mini" @click="getout()">踢出</el-button>
            </el-table-column>
          </el-table>
        </div>
        <div class="div_bottom">聊天窗口</div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userdata: [
        { username: "王轩宇", rankid: "青铜4" },
        { username: "张斌", rankid: "黑铁3" },
        { username: "黄邵文", rankid: "塑料5" },
        { username: "刘越涵", rankid: "白银2" },
        { username: "苏博文", rankid: "黄金1" },
      ],
      roomList: [],
      nowUserId: "",
    };
  },
  methods: {
    createRoom(gameid) {
      this.$axios
        .get("/api/game-service/gamehall/createRommBySys", {
          params: {
            gameid: gameid,
          },
        })
        .then((resp) => {
          console.log(resp.data);
        });
    },
    findRoomListByGameid(gameid) {
      this.$axios
        .get("/api/game-service/gamehall/findRoomList", {
          params: {
            gameid: gameid,
          },
        })
        .then((resp) => {
          console.log(resp.data.data);
          this.roomList = resp.data.data;
        });
    },
    toplay(item) {
      console.log(item);
      this.$axios
        .get("/api/game-service/gamehall/insNowUserToRoom", {
          params: {
            roomid: item.roomid,
            userid: this.nowUserId,
          },
        })
        .then((resp) => {
          console.log(resp.data);
          localStorage.setItem("roomid", item.roomid);
          this.$router.push("/room");
        });
    },
    getNowUserId() {
      this.nowUserId = sessionStorage.getItem("userid");
    },
  },
  created() {
    let gaemid = localStorage.getItem("gameItem");

    // this.$alert("游戏id" + gaemid);

    this.createRoom(gaemid);
    this.findRoomListByGameid(gaemid);
    this.getNowUserId();
  },
};
</script>

<style>
.view_window {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.side_view {
  height: 100%;
  background-color: aqua;
}
.main_view {
  background-color: beige;
}
.div_top,
.div_bottom {
  width: 100%;
}
.div_top {
  height: 40%;
  background-color: red;
}
.div_bottom {
  height: 60%;
  background-color: yellow;
}
/* 房间显示 */

.boom_box {
  margin-right: 8px;
  display: flex;
  float: left;
  margin-top: 20px;
  width: 200px;
  height: 140px;
  background-color: aliceblue;
}
.left,
.right {
  height: 100%;
  float: left;
}
.left {
  width: 40%;
  /* background-color: red; */
}
.right {
  width: 60%;
  /* background-color: #00F7DE; */
}
.right span:first-child {
  color: red;
}
.boom_box:hover {
  background-color: yellow;
}
.left img {
  margin-top: 55px;
  width: 40px;
  height: 40px;
}
</style>